<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <title>易骏云 - BI</title>
  <link href="css/iview.css" rel="stylesheet" />
  <link href="css/vant.css" rel="stylesheet" />
  <link href="css/vue_vant.css" rel="stylesheet" />
  <link rel="stylesheet" href="image/icon/iconfont.css" />
  <style>
    .fontSize18 {
      font-size: 18px;
    }
    .fontSize16{
      font-size: 16px;
    }
    .textLeft {
        text-align: left;
        padding-left: 5px;
    }
    .textRight {
        text-align: right;
        padding-right: 10px;
    }
    .textCenter {
      text-align: center;
    }
    .texteee {
      color: #999;
    }
    .marginLeft {
      margin-left: 5px;
    }
    .line30 {
      line-height: 30px;
    }
    .paddingleft {
      padding-left: 8px;
    }
    .padding8 {
        padding: 0 8px;
    }
    .activation-code-manage {
        background: white;
        overflow: hidden;
        height: calc(100vh - 95px);
        display: flex;
        flex-direction: column;
    }
    .activation-code-manage .total {
        height: 20px;
        line-height: 20px;
        font-size: 20;
        font-weight: 600;
        margin: 5px 15px;
    }
    .activation-code-manage .list-wrapper {
        flex: 1;
        background: white;
        overflow: auto;
        margin: 5px 15px;
        position: relative;
        
    }
    .activation-code-manage .list-wrapper .header {
        background: #eee;
        /* color: white; */
        border: none;
        position: sticky; 
        top: 0;
        z-index: 1; 
    }
    .activation-code-manage ul {
        min-width: 450px;
        padding: 10px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .activation-code-manage li {
        width: 100px;
        font-weight: 500;
        text-align: center;
    }
    .activation-code-manage .column-large {
        width: 60px;
    }
    .tabs {
        line-height: 20px;
    }
    .tabs .van-col{
        text-align: center;
    }
    .tabs .van-tabs--line .van-tabs__wrap {
        height: 30px;
    }
    .borderRight {
        border-right: 1px solid #eee;
    }
    .border_Bot {
        border-bottom: 1px solid #eee;
    }
    .padding3 {
        padding: 3px 0;
    }
    .screen {
        text-align: center;
        font-size: 0.8rem;
        position: relative;
    }
    .screen i{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right:15px;
    }
    .img {
        width: 50px;
    }
    .van-dialog {
        background: none;
    }
    .van-dialog .van-dialog__content {
        position: relative;
        height: 300px;
    }
    .imgEnlarged {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 90%;
    }
    .screeTit {
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #646566;
        border-bottom: 1px solid #ccc;
    }
    .condiName {
        line-height: 30px;
        padding-left: 5px;
    }
    .condiList {
        background: #ccc;
        line-height: 25px;
        height: 25px;
        margin-bottom: 5px;
        text-align: center;
        border: 1px solid #ccc;
    }
    .selectScree .condiList{
        background: #f8ddaa;
        color: orange;
        border-color: #f8ddaa;
    }
    .rakingHeader {
        line-height: 25px;
        padding: 5px 0;
    }
    .returnBtn {
        position: relative;
        padding-left:25px;
    }
    .returnBtn img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5px;
        width: 20px;
    }
    .screeInput {
        padding: 0px 5px;
        background: #eee;
        line-height: 27px;
        overflow: hidden;
    }
    .screeInput i {
        color: orange;
        font-size: 20px;
        display: flex;
        align-items: center;
        height: 27px;
    }
    .screeInput input {
        background: #eee;
        border: none;
        font-size: 14px;
        color: black;
        padding-left: 5px;
    }
    .refresh{
        text-align: center;
        width: 50px;
        height: 26px;
        line-height: 26px;
        border: 1px solid orange;
        color: orange;
        border-radius: 4px;
    }
    .rem8 {
        font-size: 0.8rem;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <div class="ranking">
        <van-row gutter="10" class="border_Bot rakingHeader">
            <van-col span="5" @click="window.history.go(-1)" class="textLeft returnBtn">
                <img src="img/icon_返回@1x.png" alt="" /><span class="rem8">返回</span>
            </van-col>
            <van-col span="15" class="screeInput">
                <van-icon name="search" :size="20" color="orange" />
                <input type="text" class="input" v-model="queryTest" placeholder="输入序号或款号查询" />
            </van-col>
            <van-col span="4" class="textRight">
                <div class="refresh" @click="getList">
                    刷新
                </div>
            </van-col>
        </van-row>
        <div class='dataTop clear'>
			
			
		</div>
        <van-row class="border_Bot padding3">
            <van-col span="12" class="tabs borderRight">
                <van-tabs v-model="rankingAmount" title-active-color="orange" line-height="0" @click="select">
                    <van-tab :name = 1 title="按订单量排名" />
                    <van-tab :name = 2 title="按金额排名" />
                </van-tabs>
            </van-col>
            <van-col span="12" class="tabs">
                <van-tabs v-model="stylesRanking" title-active-color="orange" line-height="0" @click="select">
                    <van-tab :name = 1 title="按款排名" />
                    <van-tab :name = 2 title="按款色排名" />
                </van-tabs>
            </van-col>
        </van-row>
        <van-row class="border_Bot padding3" gutter="10">
            <van-col span="18" class="tabs">
                <van-tabs v-model="regional" title-active-color="orange" line-height="0" @click="select">
                    <van-row title-active-color="orange" line-height="0">
                        <van-col span="8"><van-tab :name="1" title="按全国" /></van-col>
                        <van-col span="8"><van-tab :name="2" title="按区域" /></van-col>
                        <!-- <van-col span="8"><van-tab :name="3" title="按总代" /></van-col> -->
                    </van-row>
                </van-tabs>
            </van-col>
            <van-col span="6" style="display: flex;align-items: center;" @click="openScreen" class="line30 screen"><img src="img/filters.png" alt="" class="imgcoms"  style="width:30px;height:30px;"/><span>筛选</span></van-col>
        </van-row>
        <div class="activation-code-manage">
            <div class="list-wrapper">
                <ul class="header">
                    <li class="column-large">排名</li>
                    <li class="img">图片</li>
                    <li>我的订量</li>
                    <li v-show="stylesRanking === 1">款号</li>
                    <li v-show="stylesRanking === 1">款号名称</li>
                    <li v-show="stylesRanking === 2">颜色</li>
                    <li v-show="stylesRanking === 2">颜色名称</li>
                    <li>吊牌价</li>
                </ul>
                <van-list
                  finished-text="没有更多了"
                >
                    <ul v-for="(item, index) in dataList" :key="item.id">
                        <li class="column-large">{{ item.rank_no }}</li>
                        <li @click="enlarged(item)"><img class="img" :src="imgurl + item.image1_path" /></li>
                        <li>{{ item.user_qty}}</li>
                        <li v-show="stylesRanking === 1">{{ item.style }}</li>
                        <li v-show="stylesRanking === 1">{{ item.stylename }}</li>
                        <li v-show="stylesRanking === 2">{{ item.clr }}</li>
                        <li v-show="stylesRanking === 2">{{ item.clrname }}</li>
                        <li>{{ item.dprice }}</li>
                    </ul>
                </van-list>
                <ul>
                    <li class="column-large">共{{dataList.length}}行</li>
                    <li></li>
                    <li>{{sum}}</li>
                    <li v-show="stylesRanking === 1"></li>
                    <li v-show="stylesRanking === 1"></li>
                    <li v-show="stylesRanking === 2"></li>
                    <li v-show="stylesRanking === 2"></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <van-dialog v-model="imgEnlarged" :close-on-click-overlay="true" title="标题" show-cancel-button overlay-class="enlarged" :title="false" :show-confirm-button="false" :show-cancel-button="false">
            <img class="imgEnlarged" :src="url" />
        </van-dialog>
        <van-popup v-model="screeShow" position="right" @click-overlay="getScreen" :style="{ height: '100%', width: '80%' }" >
            <div class="screeTit">款式过滤条件</div>
            <div class="border_Bot" v-for="(item, index) in stylesList" :key="item.id">
                <div class="condiName">{{item.attribdefname}}</div>
                <van-row gutter="20" class="padding8">
                    <van-col v-for="itemData in item.attribs" :key="itemData.id" span="8" @click="filtration(item, index, itemData)" :class="selectScreeList[index].includes(itemData.id) ? 'selectScree': ''">
                        <div class="condiList">{{itemData.attribname}}</div>
                    </van-col>
                </van-row>
            </div>
        </van-popup>
    </div>
  </div>
  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/iview.min.js"></script>
  <script src="js/swiper.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/hammer.js" type="text/javascript" charset="utf-8"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          dateActive: '1',
          active: '1',
          rData: {
            dtlist: []
          },
          url: '',
          access_token: '',
          begin_end_date: [],
          show: false,
          showM: false,
          minDate: new Date(2010, 0, 1),
          maxDate: new Date(),
          currentDate: new Date(),
          billdate: '',
          dataList: [],
          rankingAmount: 1,
          stylesRanking: 1,
          regional: 1,
          sum: 0,
          imgEnlarged: false,
          url: '',
          screeShow: false,
          stylesList: [],//款式过滤条件
          selectScreeList: [],//存放所有选中的筛选条件
          queryTest: '',
          imgurl: 'https://hz.enginesoft.cn/eboss_yun/server',
        };
      },
      methods: {
        select (index, title) {
            this.getList()
        },
        filtration (item, index, listitem) {
            let num = this.selectScreeList[index].findIndex(i => i === listitem.id);
            if (num > -1) {
                this.selectScreeList[index].splice(num, 1)
            } else {
                this.selectScreeList[index].push(listitem.id)
            }
        },
        openInstitutions () {

        },
        getScreenList () {
            let that = this
            $.ajax({
                url: 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx',
                type: "post",
                data: JSON.stringify({
                    api: "dhh_GetAttrib.t",
                    token: this.token,
                }),
                success: (res) => {
                    if (res.code == 200) {
                        this.stylesList = res.data;
                        this.selectScreeList = Array.from({ length: this.stylesList.length || 0 }, () => []);
                    } else {
                        that.$Message.error({
                        content: "暂无数据",
                        duration: 5,
                        });
                    }
                }
            })
        },
        // 筛选后重新请求
        getScreen () {
            this.attribsData = {};
            this.selectScreeList.forEach((item, index) => {
                if(item.length > 0) {
                    this.attribsData['attrib' + Number(this.stylesList[index].attribdef)] = item.join(',')
                }
            })
            this.getList()
        },
        openScreen () {
            this.screeShow = true;
        },
        enlarged (data) {
            this.imgEnlarged = true;
            this.url = this.imgurl + data.image1_path
        },
        getList() {
          let that = this
          $.ajax({
            url: this.url,
            type: "post",
            data: JSON.stringify({
                orderid: 347,
                api: "dhh_GetStyleRank.t",
                token: this.token,
                rank_type_1: this.rankingAmount,
                rank_type_2: this.stylesRanking,
                rank_type_3: this.regional,
                attribs: this.attribsData,
                access_token: this.access_token,
                style: this.queryTest
            }),
            success: (res) => {
              if (res.code == 200) {
                this.dataList = res.data;
                this.dataList.forEach((item, index) => {
                    this.sum += item.user_qty 
                })
              } else {
                that.$Message.error({
                  content: "暂无数据",
                  duration: 5,
                });
              }
            }
          })
        },
        getQueryData() {
          let oSearchItem = {};
          let searchString = window.location.search;
          let reg = /[?&][^?&]+=[^?&]+/g;
          let arr = searchString.match(reg);
          if (arr) {
            arr.forEach((item) => {
              let tempArr = item.substring(1).split("=");
              let key = decodeURIComponent(tempArr[0]);
              let value = decodeURIComponent(tempArr[1]);
              oSearchItem[key] = value;
            });
          }
          return oSearchItem
        },
      },
      created() {
        if(this.getQueryData().token){
            console.log('this.getQueryData().token',this.getQueryData().token)
          sessionStorage.setItem('token_',this.getQueryData().token) 
          sessionStorage.setItem('token',String(this.getQueryData().ccode )+ this.getQueryData().token) 
        }
      },
      mounted() {
        this.token = sessionStorage.getItem('token_') //'08CA02B70D60473399593A249F63A645'1
        this.access_token = sessionStorage.getItem('token')
        this.url = 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx';
        this.getScreenList()
        this.getList()
      }
    });
    const element = document.getElementById('app');
    const hammer = new Hammer(element);
    hammer.on('swipe', function (ev) {
      switch (ev.direction) {
        // case Hammer.DIRECTION_LEFT:
        // 	alert('Swiped left');
        // 	break;
        case Hammer.DIRECTION_RIGHT:
          window.history.go(-1)
          break;
        // 可以添加其他方向的处理...  
      }
    })
  </script>

</body>

</html>